import React, { useState } from 'react';
import { StudentProvider } from './features/students/StudentContext';
import Sidebar from './components/Sidebar/Sidebar';
import StudentsPage from './features/students/StudentsPage';
import StatisticsPage from './features/statistics/StatisticsPage';
import './App.css';
import AudioRecorder from './components/AudioRecorder/AudioRecorder';
import './components/AudioRecorder/AudioRecorderPage.css';
import Note from './components/draft/Note';
import NotePreview from './components/draft/NotePreview';
import ChatPage from './components/Chat/ChatPage';

function App() {
  const [activePage, setActivePage] = useState('students');
  const [notes, setNotes] = useState<string[]>([]);

  return (
    <StudentProvider>
      <div className="App">
        <Sidebar activePage={activePage} onPageChange={setActivePage} />
        <main className="mainContent">
          {activePage === 'students' && <StudentsPage />}
          {activePage === 'statistics' && <StatisticsPage />}
          {activePage === 'draftEdit' && <Note onPageChange={setActivePage} />}
          {activePage === 'draftPreview' && <NotePreview onPageChange={setActivePage} />}
          {activePage === 'chat' && <ChatPage />}
          {activePage === 'recorder' && (
            <div className="audio-recorder-page">
              <h2>语音笔记</h2>
              <AudioRecorder
                uploadUrl="http://localhost:5000/api/audio/upload"
                recordId="note-1"
                chunkDuration={5000}
                onStatusChange={(status) => console.log('录音状态:', status)}
                onError={(error) => {
                  console.error('录音错误:', error);
                  // 将错误信息添加到记事本中
                  setNotes(prev => [...prev, `录音错误: ${error}`]);
                }}
                onTranscript={(transcript) => {
                  console.log('收到语音转文字结果:', transcript);
                  // 将语音转文字的结果添加到记事本中
                  setNotes(prev => [...prev, transcript]);
                }}
              />
              <div className="notes-section">
                <h3>记事本</h3>
                <div className="notes-list">
                  {notes.map((note, index) => (
                    <div key={index} className="note-item">
                      <span className="note-index">{index + 1}.</span>
                      <span className="note-content">{note}</span>
                    </div>
                  ))}
                </div>
                {notes.length === 0 && (
                  <p className="no-notes">暂无笔记内容</p>
                )}
                {/* 添加一个测试按钮，用于手动添加测试笔记 */}
                <button
                  onClick={() => setNotes(prev => [...prev, "这是一条测试笔记内容"])}
                  className="test-note-button"
                >
                  添加测试笔记
                </button>
              </div>
            </div>
          )}
        </main>
      </div>
    </StudentProvider>
  );
}

export default App;
